{extend name="base"}
{block name="main"}
<script src="{:_static()}/js/reqrcode.js"></script>
<div id="app" v-cloak>
    <el-row class="ws-quote">
        <el-col :span="24" >
            <el-button type="primary" size="small" @click="add">新增</el-button>
        </el-col>
    </el-row>

<!-- 必填： 手机号、微信号、二维码、昵称、签名、属性、地区、性别 -->
    <el-table
        border
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="id"
          :width="80"
          align="center">
        </el-table-column>
        <el-table-column
          label="微信号"
          width="120"
          prop="wxId">
        </el-table-column>
        <el-table-column
          label="昵称"
          width="120"
          prop="nickName">
        </el-table-column>
        <el-table-column
          label="联系电话"
          width="120"
          prop="tel">
        </el-table-column>
        <el-table-column
          label="简介"
          prop="remark">
        </el-table-column>
        <el-table-column
          label="二维码"
          width="130"
          prop="qrcode">

            <template slot-scope="c">
                <el-tag v-if="!c.row.qrcode.length" type="info" size="mini">未设</el-tag>
                <img :src="imagePrefix+c.row.qrcode" style="width: 120px;height: auto;" v-else>
            </template>
        </el-table-column>

        <el-table-column
          label="类型"
          width="130"
          align="center"
          prop="type"
          width="100"
          >
            <template slot-scope="type">
                <el-tag type="success"v-if="type.row.type == 1">个人名片</el-tag>
                <el-tag type="danger"v-else>群名片</el-tag>
            </template>
        </el-table-column>
        
        <el-table-column
          label="添加时间"
          align="center"
          :formatter="dateFormats"
          prop="s_time">
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          prop="isUp"
          width="80"
          >
            <template slot-scope="isUp">
                <el-tag type="success"v-if="isUp.row.isUp">下架</el-tag>
                <el-tag type="info"v-else>上架</el-tag>
            </template>
        </el-table-column>
        
        <el-table-column label="操作" width="280">
            <template slot-scope="c">
                <el-button type="danger" size="mini" @click="_wspost('{:url(\'del\')}',{id:c.row.id})">删除</el-button>
                <el-button v-if="c.row.isUp" type="info" size="mini" @click="_wspost('{:url(\'isup\')}',{'isUp':0,id:c.row.id})">上架</el-button>
                <el-button v-else type="primary" size="mini" @click="_wspost('{:url(\'isup\')}',{'isUp':1,id:c.row.id})">下架</el-button>
                <!-- <el-button type="success" size="mini" @click="show(c.row)">详情</el-button> -->
                <el-button type="success" size="mini" @click="edit(c.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="page">{$list->render()|raw}</div>
    
        
    <!-- 修改用户信息 start -->
    <el-dialog :title="dialogTitle" width="900" :visible.sync="addVisible">
        <el-form ref="forms" :model="data" :rules="rules" label-width="80px">
            <el-form-item label="微信号" prop="wxId">
                <el-input v-model="data.wxId" placeholder="微信号"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickName">
                <el-input v-model="data.nickName" placeholder="昵称"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="tel">
                <el-input type="number" v-model="data.tel" placeholder="联系电话"></el-input>
            </el-form-item>
            <!-- <el-form-item label="二维码" prop="qrcode"> -->
                <!-- <el-input v-model="data.qrcode" placeholder="二维码"></el-input> -->
                <!-- <img :src="imagePrefix+data.qrcode" style="width: 50px;height: 50px;">
            </el-form-item> -->

            <el-form-item label="二维码" prop="qrcode">
                <el-upload
                  id="newfile"
                  action="{:url('upload')}"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="data.qrcode" :src="imagePrefix+data.qrcode" style="width: 80%;height: auto;">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <el-form-item label="城市选择" prop="city_id">
                <el-select v-model="data.city_id" placeholder="请选择城市">
                    <el-option
                      v-for="item in citys"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="标签属性" prop="attr">
                <el-select v-model="data.city_id" placeholder="请选择城市">
                    <el-option
                      v-for="item in attrs"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      >
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- 
            <el-form-item label="标签属性" prop="attr">
                <el-select v-model="data.attr" placeholder="请选择标签属性" multiple>
                    <el-option
                      v-for="item in attrs"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      >
                    </el-option>
                </el-select>
            </el-form-item> -->

            <el-form-item label="简介" prop="remark">
                <el-input type="textarea" :rows="2" v-model="data.remark" placeholder="简介"></el-input>
            </el-form-item>

            <el-form-item label="名片类型" prop="type">
                <el-radio-group v-model="data.type">
                    <el-radio :label="1">好友</el-radio>
                    <el-radio :label="2">群</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="data.sex">
                    <el-radio :label="0">女</el-radio>
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">不限</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="性别" prop="isUp">
                <el-radio-group v-model="data.isUp">
                    <el-radio :label="0">上架</el-radio>
                    <el-radio :label="1">下架</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="头像" prop="head_img">
                <el-upload
                  id="head_img"
                  action="{:url('upload')}"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccesss"
                  :before-upload="beforeAvatarUploads">
                  <img v-if="data.head_img" :src="imagePrefix+data.head_img" style="width: 80%;height: auto;">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">提 交</el-button>
        </div>
    </el-dialog>
    <!-- 修改用户信息 end -->
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        tableData:{$list->toJson()|raw}, // 列表数据
        citys:{$citys->toJson()|raw},
        attrs:{$attrs->toJson()|raw},
        imagePrefix:"{:images()}",
        heads:['01','03','04','05','06','09','010','011','012','013','014','015','016','017','018','019','020','021','022','023','11','12','14','15','16','17','18','19','110','111','112','113','114','21','22','23','24'],
        addVisible:false, //添加菜单框
        dialogTitle:'编辑',
        data:{}, // 添加、编辑数据
        rules:{
            name:[
                {required: true, message:'请输入标题'},
            ],
            
        },
    },
    created(){
        this.emptyData();
    },
    watch:{
        addVisible(val){
            if(val){
                
            }
        }
    },
    methods:{
        handleAvatarSuccesss(res,file){
            if(res.status===0){
                this.data.head_img=res.data;
            }
            if(res.msg){
                this.$message.success(res.msg)
            }
        },
        beforeAvatarUploads(file){
            if (file.type.indexOf('image')===-1) {
              this.$message.error('仅允许上传图片文件!');
              return;
            }
            return true;
        },
        handleAvatarSuccess(res,file){
            // console.log(res);
            // console.log(file);
            if(res.status===0){
                this.data.qrcode=res.data;
                // this.row.cover=res.data;
            }
            // console.log(this.data.qrcode);
            if(res.msg){
                this.$message.success(res.msg)
            }
        },
        beforeAvatarUpload(file,res){
            // alert(1111111);
            if (file.type.indexOf('image')===-1) {
              this.$message.error('仅允许上传图片文件!');
              return;
            }
            var img = file;
            //   console.log(newfile[0]);
            // console.log(getObjectURL(file));// newfile[0]是通过input file上传的二维码图片文件
            qrcode.decode(getObjectURL(img));
            var imgMsgs;
            // var rtn = true;
            var _this = this;
            console.log(res);
            return new Promise(function(resolve,reject){
              qrcode.callback = function (imgMsg) {
                  // alert("二维码解析：" + imgMsg)
                  // console.log(imgMsg);
                  imgMsgs = imgMsg;
                  // 判断图片中是否存在二维码信息
                  if (imgMsg == '' || imgMsg == 'error decoding QR Code') {
                      _this.$message.error('该图片不是二维码图片！');
                      reject('该图片不是二维码图片！');
                  }
                  else{
                      // 解析信息后，ajax判断二维码的信息是否为重复信息
                      // _wspost('{:url(\'reqinfo\')}',{'info':imgMsg,id:c.row.id})

                      $.post("{:url('reqinfo')}",{'info':imgMsg},function(result){
                          console.log(result);
                          if (result.code == 1) {
                              _this.data.qrcode_text = imgMsg;
                              // 成功
                              resolve('')

                          }
                          else{
                              // 失败
                              _this.$message.error('二维码名片已经存在，请勿重复发布');
                              reject('二维码名片已经存在，请勿重复发布');
                          }
                          
                      },'json');
                      // resolve('')
                  }
                  //console.log(rtn);
              }
            })
            // return;
            // 解析信息后，ajax判断二维码的信息是否为重复信息
            // 
            // console.log(rtn);

            // return true;
        },
        emptyData(newData={}){
            this.data=Object.assign({
                id:'',
                wxId:'',
                tel:'',
                nickName:'',
                city_id:'',
                remark:'',
                attr:[],
                sex:0,
                head_img:'',
                isUp:'',
                type:'',
                qrcode:'',
                qrcode_text:'',
            },newData);
        },
        showDialog(isShow=true){
            this.addVisible=isShow;
        },
        // 用户提交
        submit(){
            this.onSubmit('forms','{:url(\'add\')}');
        },
        // 新增
        add(data){
            this.dialogTitle='新增';
            this.emptyData(data);
            this.showDialog();
        },
        // 编辑
        edit(row){
            this.dialogTitle='编辑';
            this.emptyData(row);
            this.showDialog();
        },
        // 用户提交
        close(row){
          console.log(row);
            // this.onSubmit('forms','{:url(\'add\')}');
        },
        
    },
});

    // var newfile = document.getElementById('newfile');
    var getObjectURL = function (file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
          url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }


    // newfile.onchange = function () {
    //     //   console.log(newfile[0]);
    //     console.log(getObjectURL(this.files[0]));// newfile[0]是通过input file上传的二维码图片文件
    //     qrcode.decode(getObjectURL(this.files[0]));
    //     qrcode.callback = function (imgMsg) {
    //         alert("二维码解析：" + imgMsg)
    //     }
    // }
</script>
{/block}